import { useQuasar } from '@teld/q-components';

import { omit } from 'lodash';
import { defineComponent, inject, ref } from 'vue';
import {
  OPERATION_DESCRIPTORS,
  OPERATION_ICONS,
  getFilterRowOperationDescriptions,
} from './conf.js';
import styles from './filter-layout.module.scss';
import TItem from 't/basic/item';
import TItemSection from 't/basic/item-section'
import TIcon from 't/basic/icon';
import TBtnDropdown from 't/basic/button-dropdown';
import TList from 't/basic/list';

export default defineComponent({
  props: {
    filterOperations: {
      type: Array,
      default() {
        return Object.keys(
          omit(OPERATION_DESCRIPTORS, OPERATION_DESCRIPTORS.default),
        );
      },
    },
    defaultOperation: {
      type: Object,
      default() {
        const $q = useQuasar();
        const OPERATION_DESCRIPTORS_LANG =
          getFilterRowOperationDescriptions($q);
        const val = {
          name: 'default',
          // selected: op.value === value,
          text: OPERATION_DESCRIPTORS_LANG.default,
          icon: OPERATION_ICONS.default,
        };
        return val;
      },
    },
  },

  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const value = ref();
    const $q = useQuasar();

    const OPERATION_DESCRIPTORS_LANG = getFilterRowOperationDescriptions($q);

    const filterOperationMenuItems = props.filterOperations.map(value => {
      const descriptionName = OPERATION_DESCRIPTORS[value];
      return {
        name: value,
        // selected: op.value === value,
        text: OPERATION_DESCRIPTORS_LANG[descriptionName],
        icon: OPERATION_ICONS[value],
      };
    });

    // 通过 ref 创建 operation
    const operation = inject('operation');

    const renderFilterOperation = () => {
      return filterOperationMenuItems.map(filterOper => {
        return (
          <TItem
            active={filterOper.name == operation.value.name}
            clickable
            onClick={() => operationItemClick(filterOper)}
            v-ripple
            // style='padding: 8px'
            class={[styles.contextMenuItem]}
          >
            <TItemSection class='q-pr-none'>
              <div class={[styles.contextMenuItemSection]}>
                <div class={[styles.icon]}>
                  <TIcon name={filterOper.icon}  />
                </div>
                <div>{filterOper.text}</div>
              </div>
            </TItemSection>
          </TItem>
        );
      });
    };

    const setDefault = () => {
      // value.value = '';
      // operation.value = props.defaultOperation;
      operation.value = {
        name: 'default',
        // selected: op.value === value,
        text: OPERATION_DESCRIPTORS_LANG.default,
        icon: OPERATION_ICONS.default,
      };
    };

    const operationItemClick = filterOper => {
      if (filterOper.name == 'between' || operation.value.name == 'between') {
        filterOper.filterValue = '';
        operation.value.filterValue = '';
      }
      operation.value = { ...operation.value, ...filterOper };
    };

    const render = () => {
      return (
        <TBtnDropdown
          menu-self='top left'
          flat
          glossy={false}
          style='border:none; background-color: transparent;'
          menu-offset={[-36, 0]}
          noIconAnimation
          dropdownIcon={operation.value.icon}
        >
          <TList>
            {renderFilterOperation()}
            <TItem
              clickable
              onClick={setDefault}
              v-ripple
              class={[styles.contextMenuItem]}
            >
              <TItemSection class='q-pr-none'>
                <div class={[styles.contextMenuItemSection]}>
                  <div class={[styles.icon]}>
                    <TIcon name={OPERATION_ICONS.default} />
                  </div>
                  <div>{OPERATION_DESCRIPTORS_LANG.default}</div>
                </div>
              </TItemSection>
            </TItem>
          </TList>
        </TBtnDropdown>
      );
    };

    return () => {
      return render();
    };
  },
});
